<script setup>
import  { tool }  from "../tool/index"
import img from "../class/img/logo_s.png"
import { useRouter } from "vue-router"
import { reactive, watch, } from "vue"
import { ElMessage } from 'element-plus'
import { useStore } from "vuex"
const store = useStore()
const router = useRouter()
const User = reactive({
    username: undefined,
    password: undefined,
    agePassword: undefined,
    email: undefined,
    gender: undefined,
    nickname: "",
    created_at: new Date(),
    updated_at: new Date()

})
var gender = {
    options: [
        { value: "male", label: "男" },
        { value: "female", label: "女" },
        { value: "other", label: "未设置" }
    ]
}
watch(User, (NewValue) => {
    User.username = tool.format(NewValue.username).CN().SB().getValue()
    User.nickname =  tool.format(NewValue.nickname).SQL().getValue()
    User.password =  tool.format(NewValue.password).CN().SQL().getValue()
    User.agePassword =  tool.format(NewValue.agePassword).CN().SQL().getValue()
    User.email =  tool.format(NewValue.email).CN().SQL().getValue()

}
)
function goLogin() {
    router.push("/login")
}
// 查询账号
async function SearchAccount(username) {
    try {
        const data = {
                key: "Search",
                columns: ["username"],
                data: {
                    OpLike: false,
                    key: ["username"],
                    value: [username]
                }
            }
        const response = await tool.axiosApi("user", data, "get")
        if (response.data[0].username === username) {
            return true
        } else {
            return false
        }
    } catch (err) {
        return false
    }
}
async function addUser() {
    try {
    var username = await SearchAccount(User.username)
    if (username) {
        ElMessage("账号已存在，请重置")
        return 0
    } else if (User.password == User.agePassword && User.password != undefined) {
        const data = {
            key: "add",
            data: {
                key: Object.keys(User),
                value: Object.values(User)
            }
        }
        const response = await tool.axiosApi("user", data, "post")
        if (response.message) {
            store.commit("userAdd", User)
            ElMessage({
                type:"success",
                message:"注册成功"
            })
            await router.push({ name: "login" })
        } else {
            ElMessage("注册失败")
        }
    } else {
        ElMessage("密码不一致")
        return 0
    }
} catch (error) {
        
    }
}

</script>
<template>
    <div class="register_body">
        <div class="img">
            <el-image :src="img" fit="contain" />
        </div>
        <el-row :gutter="0">
            <el-col :span="12">
                <span>* 账号：</span>
                <el-input maxlength="32" show-word-limit v-model="User.username"></el-input>
            </el-col>
            <el-col :span="12">
                <span>* 昵称：</span>
                <el-input maxlength="32" show-word-limit v-model="User.nickname"></el-input>
            </el-col>
            <el-col :span="12">
                <span>* 密码：</span>
                <el-input maxlength="32" show-word-limit v-model="User.password"></el-input>
            </el-col>
            <el-col :span="12">
                <span>* 确认密码：</span>
                <el-input maxlength="32 " show-word-limit v-model="User.agePassword"></el-input>
            </el-col>
            <el-col :span="12">
                <span>性别：</span>
                <el-select v-model="User.gender" placeholder="Select">
                    <el-option v-for="(item, index) in gender.options" :key="index" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-col>
            <el-col :span="12">
                <span>邮箱：</span>
                <el-input v-model="User.email"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="goLogin()">返回登录</el-button>
            </el-col>
            <el-col :span="20">
                <el-button type="success" @click="addUser()">确认注册</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped>
.register_body {
    width: 70%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
    background-color: white;
}

.img {
    margin-bottom: -27px;
    text-align: center;
}

.el-image {
    margin: auto 0;
    width: 150px;
}

.el-row {
    border-top: solid #002cc0;
    width: 1000px;
    margin: auto;
}

.el-col {
    padding: 15px;
}

.el-col .el-input {
    border-radius: 4px;
    margin: 10px;
    height: 40px;
}

.el-col .el-select {
    display: block;
    border-radius: 4px;
    margin: 10px;
}

.el-col span {
    margin: 15px;
}

.el-button {
    width: 100%;
}
</style>